import { patch,h } from "./sanbbdom";
import movieData from './data.js'

let vnode
let data = [ ...movieData ]
let newKey = 11

function movieView (movie) {
  return h(
    'div.movie',
    {
      key: movie.rank
    },
    [
      h('div.rank', {}, movie.rank),
      h('div.title', {}, movie.title),
      h('div.desc', {}, movie.desc),
      h(
        'div.btn-remove',
        {
          on: {
            click: [ remove, movie ]
          }
        },
        'x'
      )
    ]
  )
}

function view (data) {
  return h('div#app', [
    h('h1', 'Top 10 movies'), // 标题栏
    h('div.header', [
      h(
        // Add 按钮
        'span.btn.add',
        {
          on: {
            click: add
          }
        },
        'Add'
      ),
      h('span', {}, 'Sort By:'),
      h(
        'span.btn.rank',
        {
          on: {
            click: [ sortBy, 'rank' ] // 使用数组的方式传入函数和触发时的参数
          }
        },
        'Rank'
      ),
      h(
        'span.btn.title',
        {
          on: {
            click: [ sortBy, 'title' ] // 使用数组的方式传入函数和触发时的参数
          }
        },
        'Title'
      ),
      h(
        'span.btn.desc',
        {
          on: {
            click: [ sortBy, 'desc' ] // 使用数组的方式传入函数和触发时的参数
          }
        },
        'Description'
      )
    ]),
    // 电影列表
    h('div.list', {}, data.map(movieView))
  ])
}

function sortBy (prop) {
  data.sort((movieA, movieB) => {
    if (movieA[prop] > movieB[prop]) {
      return 1
    }
    if (movieA[prop] < movieB[prop]) {
      return -1
    }
    return 0
  })
  render()
}

// 重新渲染DOM
function render () {
  vnode = patch(vnode, view(data))
}

// 从导入的电影列表里随机选择一个增加到页面上
function add () {
  let newMovie = movieData[Math.floor(Math.random() * 10)]
  data = [{...newMovie, rank: newKey++}].concat(data)
  render()
}

// 删除选定的电影
function remove (movie) {
  data = data.filter((m) => {
    return m !== movie
  })
  render()
}

// 页面加载完毕后渲染虚拟DOM
window.addEventListener('DOMContentLoaded', () => {
  let container = document.getElementById('app')
  vnode = patch(container, view(data))
})
